<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-preview-main">
      <div class="JNPF-common-page-header">
        <el-page-header @back="goBack" content="详情" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label-width="0">
                <JNPF-Text :style='{"width":"100%"}'
                  :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":14,"line-height":14,"font-style":"normal","text-align":"left"}'
                  value="基础信息" :closable="false">
                </JNPF-Text>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider content-position="center">
              </el-divider>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图片:" prop="picture">
                <JNPF-UploadImg v-model="dataForm.picture" disabled detailed :fileSize="5" sizeUnit="MB" :limit="5">
                </JNPF-UploadImg>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标题:" prop="title">
                <p>{{dataForm.title}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供需分类:" prop="typeid">
                <p>{{ dataForm.typeid | dynamicText(typeidOptions) }} </p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供需类型:" prop="typeid">
                <p>{{ dataForm.supplydemandtype == 0 ? '供应' :' 需求' }} </p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="简介:" prop="listintroduce">
                <p>{{dataForm.listintroduce}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="附件:" prop="filejson">
                <JNPF-UploadFz v-model="dataForm.filejson" disabled detailed :showTip="true" :fileSize="5" sizeUnit="MB"
                  :limit="9" buttonText="点击上传">
                </JNPF-UploadFz>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <JNPF-Text :style='{"width":"100%"}'
                  :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":14,"line-height":14,"font-style":"normal","text-align":"left"}'
                  value="联系信息" :closable="false">
                </JNPF-Text>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider content-position="center"></el-divider>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人:" prop="contactname">
                <p>{{dataForm.contactname}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话:" prop="contactphonenum">
                <p>{{dataForm.contactphonenum}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="详细地址:" prop="detailaddress">
                <p>{{dataForm.detailaddress}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <JNPF-Text :style='{"width":"100%"}'
                  :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":14,"line-height":14,"font-style":"normal","text-align":"left"}'
                  value="内容详情" :closable="false">
                </JNPF-Text>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider content-position="center"></el-divider>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="detaileddescribe">
                <div v-html="dataForm.detaileddescribe"></div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <JNPF-Text :style='{"width":"100%"}'
                  :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":14,"line-height":14,"font-style":"normal","text-align":"left"}'
                  value="数据信息" :closable="false">
                </JNPF-Text>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider content-position="center"></el-divider>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态:" prop="expiretime">
                <span v-if="dataForm.approvestate == 0">待审核</span>
                <span v-if="dataForm.approvestate == 1 && dataForm.endmark == 0">进行中</span>
                <span v-if="dataForm.approvestate == 1 && dataForm.endmark == 1">已结束</span>
                <span v-if="dataForm.approvestate == 2">已驳回</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间:" prop="expiretime">
                <p>{{dataForm.approvetime || ''}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核意见:" prop="expiretime">
                <p>{{dataForm.approvecontent || ''}}</p>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间:" prop="expiretime">
                <p>{{dataForm.creatortime || ''}}</p>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
  import { getAssoSupplyInfo } from '@/api/asso/supply/list'
  import { getAssoSupplyTypeList } from '@/api/asso/supply/category'
  import PrintBrowse from '@/components/PrintBrowse'
  import jnpf from '@/utils/jnpf'
  export default {
    name: 'vipsupplylistDetail',
    components: {
      PrintBrowse
    },
    props: [],
    data() {
      return {
        visible: false,
        loading: false,
        printBrowseVisible: false,
        printId: '',
        dataForm: {
          id: '',
          picture: [],
          title: '',
          listintroduce: '',
          typeid: "",
          expiretime: '',
          detaileddescribe: '',
          filejson: [],
          contactname: '',
          contactphonenum: '',
          detailaddress: '',
        },
        typeidOptions: [{
          "fullName": "选项一",
          "id": "1"
        }, {
          "fullName": "选项二",
          "id": "2"
        }],

      }
    },
    computed: {},
    watch: {},
    created() {

    },
    mounted() {},
    methods: {
      dataInfo(dataAll) {
        let _dataAll = dataAll
        _dataAll.picture = _dataAll.picture ? JSON.parse(_dataAll.picture) : []
        _dataAll.typeid = _dataAll.typeid ? JSON.parse(_dataAll.typeid) : []
        _dataAll.filejson = _dataAll.filejson ? JSON.parse(_dataAll.filejson) : []
        this.dataForm = _dataAll
      },
      goBack() {
        this.$emit('refresh')
      },
      init(id) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.$nextTick(() => {
          if (this.dataForm.id) {
            this.loading = true
            getAssoSupplyInfo(this.dataForm.id).then((res) => {
              this.dataInfo(res.data)
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          }
          this.getAssoSupplyTypeListFun()
        })
      },
      getAssoSupplyTypeListFun(){
        let _query = {
          superQueryJson: '',
          sort: "desc",
          sidx: "",
        };
        getAssoSupplyTypeList(_query).then((res) => {
          res.data.list.forEach(item => {
            item.children = []
            item.fullName = item.name
          })
          this.treeData = JSON.parse(JSON.stringify(res.data.list))
          this.typeidOptions = JSON.parse(JSON.stringify(res.data.list))
        })
      }
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-divider--horizontal{
    margin-top: 0;
  }
</style>
